<template>
  <!--

    希望为列表增加一个动画效果
    动画效果需要用transition把标签包裹
    如果是包含多个，需要使用transition-group，且要为每个需要
    增加元素的标签新增key
    如果你希望内容动画一开始就播放，也就是进入enter状态
    可以使用appear

    如果你动画默认不写名字
    那么这个标签默认对应你的
    v-enter-active

    以及
    v-leave-active
    如果你定义了名字，那么这个就变成了
    todo-leave-active
    todo-enter-active
    要这样写才能捕获到
  -->
<transition name="todo" appear>
<li>
          <label>
              <!-- <input type="checkbox" 
              :checked="todo.completed"
              @click="switchCheck(todo.id)"
              /> -->

              <input type="checkbox" 
              :checked="todo.completed"
              @change="switchCheck(todo.id)"
              />
              <!--是否点击的编辑按钮来显示-->


              <!-- <input type="checkbox" 
              v-model="todo.completed"

              这个方式可以一条语句解决
              上面两个，但是不推荐，因为这会改变传进来
              的props里，todo里面的值
              vue不建议你去改变props里面的值，虽然vue对props
              属性是浅监听，也就是对改变对象里的值不会报错，
              尽管如此，我们还是不推荐
              /> -->
              <span v-show="!todo.isEdit">{{todo.title}}</span>
              <input 
              v-show="todo.isEdit"
              type="text" 
              :value="todo.title"
              @blur="handlBlur(todo,$event)"
              ref="inputTitle"
              />
            </label>
            <button v-show="todo.isEdit" class="btn btn-danger" 
              @click="handlerEdit(todo)">修改</button>
            <button class="btn btn-danger" 
              @click="handlerDelete(todo.id)">删除</button>
                
            </li>
</transition>
</template>

<script >
export default {
    name:'MyItem',
    props:['todo','itemCheck','itemDelete'],
    methods: {
      switchCheck(id){
        this.itemCheck(id)
      },
      handlerDelete(id){
          if(confirm('你确定要删除吗?')){
            this.itemDelete(id)
          }
      },
      handlerEdit(todo){
        // 由于你希望在编辑的时候添加上后来的属性，所以需要Vue的方法
        // 给新的数据加上监听，让vue可以检测到这个属性的变化
        if(todo.hasOwnProperty('isEdit')){
          
           todo.isEdit = true;
        }else{
         this.$set(todo,'isEdit',true)
        }
        // 获得焦点
        
        /**
         * this.$refs.inputTitle.focus()
         * 不过需要注意的是，你执行这句话后，页面上
         * 不会有获得焦点的现象
         * 原因在于vue需要在这个方法执行完毕后，才会重新渲染
         * 模版，这就导致了，你这个聚焦的方法确实执行了
         * 但是这个时候页面上的这个input框还没有生成
         * 所以就不会有聚焦的现象。
         * 
         * 那么我们可以使用这样一个函数
         * 叫做$nextTick
         * 这个方法会在dom元素更新完毕后执行他的回调
         */
        this.$nextTick(function(){
          this.$refs.inputTitle.focus()
        })
      },
      handlBlur(todo,e){
        todo.isEdit = false
        if(!e.target.value.trim()) return alert('输入不能为空')
        // 获得值，然后去和todos里面的值去换，传回给父亲
        this.$bus.$emit('updateTodo',todo.id,e.target.value)
      }
    },
}
</script>

<style scoped>
    /*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}


li:hover{
  background-color:#ddd;
  /* display: block; */
}

li:hover button{
  display: block;
}


li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

/**添加动画效果 */

.todo-enter-active{
  animation:todoAnimate 0.5 linear;
}

.todo-leave-ative{
  animation: todoAnimate 0.5 linear reverse;
}

@keyframes todoAnimate{
  from{
    transform: translate(-100%);
  }
  to{
    transform: translateX(0px);
  }

}

</style>